
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据模型</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="icon" href="../favicon.ico" />
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html {
            background: #fff;
        }
        body {
            background: #fff;
            overflow: hidden;
        }
        .dm-container {
            min-height: 100vh;
            color: #fff;
        }
        .tool-bar {
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            background: linear-gradient(239deg, #4196FE 0%, #1963DB 100%)
        }
        .tool-bar .logo {
            margin-right: 20px;
        }
        .tool-bar .item {
            display: inline-block;
            text-align: center;
            cursor: pointer;
        }
        .cont-body {
            display: flex;
            height: calc(100vh - 50px);
            background: #EFF5FF;
        }
        .cont-body-left {
            min-width: 200px;
            color: #000;
            background: #fff;
        }
        .cont-body-left .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            margin-top: 20px;
            width: 128px;
            height: 128px;
            color: #237CE9;
            cursor: pointer;
            border-radius: 50%;
            background: url("../images/index/menu_bg.png") center center / 100% 100% no-repeat;
        }
        .cont-body-left .item .icon {
            width: 48px;
            height:48px;
        }
        .cont-body-right {
            padding-left: 10px;
            min-width: calc(100% - 200px);
            max-height: calc(100vh - 50px);
            background: #EFF5FF;
            box-sizing: border-box;
        }
        .cont-body-right .top-info {
            margin-top: 20px;

        }
        .cont-body-right .top-info .title {
            color: #1963DB;
            font-weight: 700;
            font-size: 36px;
        }
        .cont-body-right .top-info .desc {
            color: #666;
        }
        .cont-body-right .create-wrapper {
            padding: 0 10px;
            margin: 20px 0;
            display: flex;
            justify-content: space-around;
            background: #fff;
            box-shadow: 0px 0px 20px 1px rgba(50,122,204,0.26);
            border-radius: 4px;
        }
        .cont-body-right .create-wrapper .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
            margin: 18px 5px;
            height: 264px;
            width: 290px;
            color: #000;
            border-radius: 2px;
            cursor: pointer;
            box-sizing: border-box;
            background: url("../images/index/item_bg_default.png") top left / 100% 100% no-repeat;
        }
        .cont-body-right .create-wrapper .item .icon {
            width: 58px;
            height: 58px;
        }
        .cont-body-right .create-wrapper .item .title {
            font-weight: 700;
            margin-bottom: 20px;
        }
        .cont-body-right .create-wrapper .item .desc {
            /* color: #666; */
            text-align: center;
        }
        .cont-body-right .create-wrapper .item:hover {
            color: #fff;
            background: url("../images/index/item_bg_active.png") top left / 100% 100% no-repeat;
            transition: 200ms;
        }
        .table-wrapper {
            color: #000;
        }
        .table-wrapper .thead {
            margin-bottom: 5px;
            font-size: 22px;
            color: #1963DB;
            font-weight: 700;
        }

        .table-wrapper .tbody {
            height: 200px;
            overflow-y: scroll;
        }
        .table-wrapper .tbody .tr {
            display: flex;
            align-items: center;
            height: 62px;
            color: #666666;
            background: #F8FAFE;
        }
        .table-wrapper .tbody .td{
            margin-left: 10px;
        }
      
        .table-wrapper .tbody .tr .name {
            flex: 1;
            display: flex;
        }
        .table-wrapper .tbody .tr .name .icon {
            width: 36px;
            height: 36px;
        }
        .table-wrapper .tbody .tr .name .info {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .table-wrapper .tbody .tr .name span:nth-child(1) {
            font-size: 16px;
            font-weight: 700;
            color: #000;
        }
        .table-wrapper .tbody .tr .name span:nth-child(2) {
            font-size: 14px;
        }
        .table-wrapper .tbody .tr .solution {
            width: 20%;
        }
        .table-wrapper .tbody .tr .solution .icon {
            width: 30px;
            height: 30px;
        }
        .table-wrapper .tbody .tr .module {
            width: 10%;
        }
        .table-wrapper .tbody .tr .create-time {
            width: 15%;
        }
        .table-wrapper .tbody .tr .type {
            width: 10%;
        }



        .layui-dropdown-menu li{
            padding: 0 15px;
        }
     
    </style>
</head>
<body>
    <div class="dm-container">
        <div class="tool-bar">
            <!-- 动态渲染工具栏 -->
            <!-- <img class="logo" src="../images/common/logo.png" alt="xisoft-logo">
            <span class="item" id="file">文件(F)</span>
            <span class="item" id="tool">工具(D)</span>
            <span class="item" id="help">帮助(H)</span> -->
        </div>
        <div class="cont-body">
            <div class="cont-body-left">
                <div class="item"><img class="icon" src="../images/index/icon_menu_create.png" alt="">新建</div>
                <div class="item"><img class="icon" src="../images/index/icon_menu_open.png" alt="">打开</div>
            </div>
            <div class="cont-body-right">
                <div class="top-info">
                    <!-- 动态赋值 -->
                    <p class="title"></p>
                    <p class="desc"></p>
                </div>
                <div class="create-wrapper">
                    <!-- 动态渲染新建菜单区域 -->
                    <!-- <div class="item" id="model" onclick="createHandler('model')">
                        <img class="icon" src="../images/index/icon_ui_model.png" alt="images">
                        <p class="title">新建UI Model</p>
                        <p class="desc">通过在文档中文字文字文字文字文字，做为什么使用</p>
                    </div>
                    <div class="item" id="form" onclick="createHandler('form')">
                        <img class="icon" src="../images/index/icon_ui_form.png" alt="images">
                        <p class="title">新建UI Form</p>
                        <p class="desc">点击新建一个UI Form</p>
                    </div>
                    <div class="item" id="data" onclick="createHandler('data')">
                        <img class="icon" src="../images/index/icon_data_dict.png" alt="images">
                        <p class="title">新建数据字典</p>
                        <p class="desc">点击新建一个数据字典</p>
                    </div>
                    <div class="item" id="refer" onclick="createHandler('refer')">
                        <img class="icon" src="../images/index/icon_refer.png" alt="images">
                        <p class="title">新建参照</p>
                        <p class="desc">点击新建一个参照</p>
                    </div>
                    <div class="item" id="workline" onclick="createHandler('workline')">
                        <img class="icon" src="../images/index/icon_work_line.png" alt="images">
                        <p class="title">新建业务流设计器</p>
                        <p class="desc">点击新建业务流设计器</p>
                    </div> -->
                </div>
                <div class="table-wrapper">
                    <p class="thead">最近操作</p>
                    <!-- <div class="thead">
                       <div class="th" style="flex: 1;">排序 置顶优先 文件类型 uimodel</div>
                       <div class="th" style="width: 10%;">所属方案</div>
                       <div class="th" style="width: 10%;">所属模块</div>
                       <div class="th" style="width: 15%;">创建时间</div>
                       <div class="th" style="width: 10%;">类型</div>
                    </div> -->
                    <div class="tbody">
                        <div class="tr">
                            <div class="td name">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <div class="info">
                                    <span>表单1</span>
                                    <span>http://vb578876576dvdvlfdbh3ewrtet.com/scsdz</span>
                                </div>
                            </div>
                            <div class="td solution">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <span>方案名称</span>
                            </div>
                            <div class="td module">
                                <span>模块名称</span>
                            </div>
                            <div class="td create-time">
                                <span>2022-10-20 15:36</span>
                            </div>
                            <div class="td type">
                                <span>UIform</span>
                            </div>
                        </div>
                        <div class="tr">
                            <div class="td name">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <div class="info">
                                    <span>表单1</span>
                                    <span>http://vb578876576dvdvlfdbh3ewrtet.com/scsdz</span>
                                </div>
                            </div>
                            <div class="td solution">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <span>方案名称</span>
                            </div>
                            <div class="td module">
                                <span>模块名称</span>
                            </div>
                            <div class="td create-time">
                                <span>2022-10-20 15:36</span>
                            </div>
                            <div class="td type">
                                <span>UIform</span>
                            </div>
                        </div>
                        <div class="tr">
                            <div class="td name">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <div class="info">
                                    <span>表单1</span>
                                    <span>http://vb578876576dvdvlfdbh3ewrtet.com/scsdz</span>
                                </div>
                            </div>
                            <div class="td solution">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <span>方案名称</span>
                            </div>
                            <div class="td module">
                                <span>模块名称</span>
                            </div>
                            <div class="td create-time">
                                <span>2022-10-20 15:36</span>
                            </div>
                            <div class="td type">
                                <span>UIform</span>
                            </div>
                        </div>
                        <div class="tr">
                            <div class="td name">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <div class="info">
                                    <span>表单1</span>
                                    <span>http://vb578876576dvdvlfdbh3ewrtet.com/scsdz</span>
                                </div>
                            </div>
                            <div class="td solution">
                                <img class="icon" src="../images/index/icon_tr.png" alt="icon">
                                <span>方案名称</span>
                            </div>
                            <div class="td module">
                                <span>模块名称</span>
                            </div>
                            <div class="td create-time">
                                <span>2022-10-20 15:36</span>
                            </div>
                            <div class="td type">
                                <span>UIform</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <!-- 新建方案 -->
    <div id="createSolution" style="display: none; margin: 10px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">方案名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="solutionEnName" lay-verify="required" placeholder="请输入方案名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                  <input type="text" name="solutionZhName" lay-verify="required" placeholder="请输入显示名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属服务<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <select id="solution-server" name="serviceName" lay-filter="solution" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注" name="note" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="solution_submit">创建</button>
                <button id="reset_btn2" type="reset" class="layui-btn layui-btn-primary">取消</button>
              </div>
            </div>
        </div>
    </div>
    <!-- 新建模块 -->
    <div id="createModule" style="display: none; margin: 10px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">模块名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="moduleEnName" required placeholder="请输入模块名称" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                  <input type="text" name="moduleZhName" required placeholder="请输入显示名称" autocomplete="off" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属方案<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <select id="module-solution" name="solutionName" lay-filter="solution" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上级模块</label>
                <div class="layui-input-block">
                    <select id="parent-module" name="parentModule" lay-filter="parentModule"></select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="note" placeholder="请输入备注" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="module_submit">创建</button>
                <button id="reset_btn1" type="reset" class="layui-btn layui-btn-primary">取消</button>
              </div>
            </div>
        </div>
    </div>
    <!-- 新建模型 -->
    <div id="createModel" style="display: none; margin: 10px;">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">模型名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <input type="text" name="modelEnName" required lay-verify="required" placeholder="请输入模型名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">显示名称<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                  <input type="text" name="modelZhName" required lay-verify="required" placeholder="请输入显示名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否主模型<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <input type="radio" name="isMainModel" checked value="true">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属方案<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <select id="model-solution" name="solutionName" lay-filter="solution" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属模块<span style="color: red;">*</span></label>
                <div class="layui-input-block">
                    <select id="model-module" name="moduleName" lay-filter="module" lay-verify="required"></select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注" name="note" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button id="confirm_btn" class="layui-btn layui-bg-blue" lay-submit lay-filter="model_submit">创建</button>
                <button id="reset_btn" name="reset" type="reset" class="layui-btn layui-btn-primary">取消</button>
              </div>
            </div>
        </div>
    </div>
    


</body>
<script src="https://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="../js/toolbar.js"></script>
<script src="../js/createMenu.js"></script>
<script>
// 创建事件
var layer = layui.layer,$=layui.$;
function createHandler(type) {
    switch (type) {
        case 'model':
            // layui.use(['layer'],function () {
            //     var layer = layui.layer,$=layui.$;
                layer.open({
                    type: 1,//类型
                    area: ['400px','auto'],//定义宽和高
                    title: '新建模型',//题目
                    shadeClose: false,//点击遮罩层关闭
                    content: $('#createModel'), //打开的内容
                    end: function () {
                        $('#createModel').hide()
                    }
                });
            // })
            break;
        case 'form':
            console.log('新建UI Form');
            break;
        case 'data':
            console.log('新建数据字典');
            break;
        case 'refer':
            console.log('新建参照')
            break;
    }
}

// var form = layui.form;
// form.on('submit(solution_submit)', function(data){
//     console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
//     console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
//     console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//     return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
// });
// form.on('submit(module_submit)', function(data){
//     console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
//     console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
//     console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//     return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
// });
// form.on('submit(model_submit)', function(data){
//     const submitData = data.field
//     console.log(submitData)
// });

$('#reset_btn').click(function(e) {
    $('#createModel').hide()
    layer.closeAll()
})

function rendTopInfo() {
    var infoMsg = {
        title: "欢迎使用1111111",
        desc: "文字文字文字文字文字文字文字文字文字111111"
    }
    $(".top-info .title").html(infoMsg.title)
    $(".top-info .desc").html(infoMsg.desc)

}

function getData() {
    $.ajax({
        url: 'http://win.xisofttec.com:37735/design/meta/getSysMeta',
        method: 'GET',
        success: function(e) {
            const data = e.data
            var html='<option value="">请选择</option>';
            $.each(data, function(index,item){
                html+='<option value="'+item.id+'">'+item.value+'</option>';
            });
            $("#solution-server").html(html);
            $("#module-solution").html(html);
            $("#model-solution").html(html);
            layui.use('form', function(){
                var form = layui.form;
                form.render()
            });
            layui.use('form', function(){
                var form = layui.form;
                form.on('select(solution)', function(e) {
                    const clickValue = e.value
                    let childrenOpt = [];
                    data.map(ele => {
                        if(ele.id == clickValue) {
                            childrenOpt = ele.children
                        }
                    })
                    var html_child='<option value="">请选择</option>';
                    $.each(childrenOpt, function(index,item){
                        html_child+='<option value="'+item.id+'">'+item.value+'</option>';
                    });
                    $("#parent-module").html(html_child);
                    $("#model-module").html(html_child);
                    form.render()
                })
            });
        },
        error: function(e) {
            console.log(`error: ${JSON.stringify(e)}`)
        }
    })
}
getData()
rendTopInfo()

    
</script>
</html>